<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>商城首页-供应商主页-商品详情</title>
	<link rel="stylesheet" th:href="@{/css/index.css}">
	<link rel="stylesheet" th:href="@{/css/common.css}">
	<link rel="stylesheet" th:href="@{/css/detail.css}">
	 <link rel="stylesheet" th:href="@{/layer/skin/default/layer.css}"/>
	<script type="text/javascript" th:src="@{/js/jquery-3.1.1.min.js}"></script>
	 <script th:src="@{/layer/layer.js}"></script>
	
	<style>
	body{
		background: #ffffff;
	}
	.ret_prompt{
			margin-top: 39px;
			width: 250px;
			height: 18px;
			display: block;
			line-height: 18px;
			font-size: 14px;
			color: #ce5242;
			left: 27px;
			bottom: 108px;
			position: absolute;
		}
	</style>

</head>
<body>
	<th:block th:each="phProductData,phProductDataStat:${shoppingPhProductData}" th:if="${not #lists.isEmpty(shoppingPhProductData)}">
	<th:block th:each="memberData,memberDataStat:${memberList}">
		<!-- 顶部导航条开始 -->
		<div class="puhuishopping_common_titlelink" id="puhuishopping_common_titlelink">
			<input type="hidden" id="phProductId" th:value="${phProductData.id}">
			<input type="hidden" id="productCount" th:value="${phProductData.productCount}">
			<input type="hidden" id="saleQuantity" th:value="${phProductData.saleQuantity}?${phProductData.saleQuantity}:1">
			<input type="hidden" id="retailPrice" th:value="${phProductData.retailPrice}">
			<input type="hidden" id="freight" th:value="${phProductData.freight}">
			<input type="hidden" id="numberOfPackages" th:value="${phProductData.numberOfPackages}">
			<!-- 导航条左部 -->
			<div class="centerbody">
				<div class="title_left">
					<span class="puhuishopping_common_city" id="puhuishopping_common_city">重庆</span><span class="puhuishopping_common_citychange" id="puhuishopping_common_citychange">[ 切换城市 ]</span>
					<!-- <div class='citylist' id='citylist'></div> -->
				</div>	
			<!-- 导航条右部 -->
						<!-- 未登录  -->
				<th:block th:if="${#lists.isEmpty(memberData)}">
				<input type="hidden" id="memberId" >
						<div class="title_right">
						<!-- th:href="@{/member/loadlogin}"  -->
							您好&nbsp;&nbsp;,&nbsp;<a onclick="javascript:submitOn();" class="puhuishopping_common_login" id="puhuishopping_common_login">请登录</a>
							<a th:href="@{/member/loadRegister}" class="puhuishopping_common_hyzc">会员注册</a>
							<a th:href="@{/member/loadlogin}" class="puhuishopping_common_wddd">我的订单</a>
							<!-- <a href="" class="puhuishopping_common_ydsc">移动商城</a> -->
							<div style="clear: both"></div>
						</div>
				</th:block>
				<!-- 已登录 @{/personal/loadPersonal}-->
				<th:block th:if="${not #lists.isEmpty(memberData)}">
				<input type="hidden" id="memberId" th:value="${memberData.id}">
					<div class="title_right">
						您好&nbsp;&nbsp;,&nbsp;
						<a th:href="@{/shopping/order/findOnlineOrders}" th:text="${memberData.memberName !='' and memberData.memberName!=null }?${memberData.memberName}:${memberData.memberPhone}" class="puhuishopping_common_login" ></a>
						<a onclick="logoutUser();" class="puhuishopping_common_hyzc">[退出]</a>
						<a th:href="@{/shopping/order/findOnlineOrders}" class="puhuishopping_common_wddd">我的订单</a>
						<!-- <a th:href="@{/}" class="puhuishopping_common_ydsc">移动商城</a> -->
						<div style="clear: both"></div>
					</div>
				</th:block>
			</div>	
		</div>
	</th:block>
	<!-- 顶部导航条结束 -->
	<!-- 顶部搜索栏部分开始 -->
	
	<div class="centerbody search">
		<a th:href="@{/}"><img  th:src="@{/images/普惠logo最终版.png}" alt="" class="logo"></a>
		<!-- logo图右侧供货商文字-->
		<div class="detail_title">
			<p class="name">供应商:<span  th:text="${phProductData.supplierName}"></span></p>
			<p class="supply">全国直供</p>
		</div>
		<!-- 详情页搜索框 -->
		<div class="searchbox detail_search" style="visibility: hidden;">
			<input type="text" class="searchtxt"><input type="button" class="searchbtn" value="搜索">
		</div>
	
	</div>
	<!-- 顶部商品分类和一级菜单 -->
	<div class="centerbody bannerlist">
		<div class="listleft">
			<p class="ListType">商品分类</p>
			<ul class="listbox" style="display: none;">
				<th:block th:each="classifyData,classifyDataStat:${phProductData.phProductClassifyVoList}" th:if="${not #lists.isEmpty(phProductData.phProductClassifyVoList)}">
					<li th:text="${classifyData.classifyName}" th:id="${classifyData.id}"></li>
				</th:block>
			</ul>
		</div>
		
		<div class="listright">
			<a th:href="@{/}">首页</a>
			<!-- <a href="">普惠特色</a>
			<a href="">服装美妆</a>
			<a href="">家电手机</a>
			<a href="">电脑数码</a>
			<a href="">食品生鲜</a>
			<a href="">母婴玩具</a> -->
		</div>
		<div style="clear: both"></div>
	</div>
<!-- 灰色分割块 -->
	<div class="bannerlist_gray"></div>
<!-- 详情正文 白色区域 -->
	<div class="detail_box_white" style="margin-top: 0;">
		<div class="centerbody box_white" style="margin-top: 13px;">
			<div class="box_white_left">
				<div class="preview">
					<div id="vertical" class="bigImg">
						<img  id="midimg" />
						<div style="display:none;top:100;left: 458px;" id="winSelector"></div>
					</div><!--bigImg end-->
					<div class="smallImg">
						<!--<div class="scrollbutton smallImgUp disabled"></div>-->
						<div id="imageMenu">
							<ul class="imageMenuList clearfix">
								<th:block th:each="imageData,imageDataStat:${phProductData.phProductImageVoList}" th:if="${not #lists.isEmpty(phProductData.phProductImageVoList)}">
									<li>
										<img th:src="@{${imageData.url}}" th:id="${imageData.id}">
									</li>
								</th:block>
							</ul>
						</div>
						<!--<div class="scrollbutton smallImgDown"></div>-->
					</div><!--smallImg end-->
<!-- 					<div id="bigView" style="top:0; z-index:1000;left: 458px;width: 446;height: 446;"><img width="440" height="440"  /></div> -->
					<div id="bigViewNew" style="position:fixed;display:none;z-index:2000;width:446;height:446;background-color:#ffffff;top:0;left: 880px;"><img width="440" height="440"  /></div>
				</div>
			</div>
			<div class="box_white_right">
				<p><span class="goods_detail_tit" th:text="${phProductData.productName}"></span></p>
				<p><span class="goods_detail_txt">市场参考价：</span>¥<span class="goods_detail_price_1" th:text="${phProductData.referencePrice}"></span></p>
				<p><span class="goods_detail_txt">普惠价格：</span>¥<span class="goods_detail_price_2" th:text="${phProductData.retailPrice}"></span></p>
				<p><span class="goods_detail_txt">运费：</span><span class="trans_price" th:text="${phProductData.freight}"></span>
				<span class="goods_detail_txt trans">元/件，</span><span class="trans_num" th:text="${phProductData.numberOfPackages}">5</span><span class="goods_detail_txt trans">件包邮</span></p>
				<p><!-- <span class="goods_detail_txt">销量：</span>
				<span class="goods_detail_txt goods_detail_num1">500</span> -->
				<span class="goods_detail_txt" style="padding-left: 112px;">赠送积分：</span>
				<span id="retailPriceCount" class="goods_detail_txt goods_detail_num2" ></span></p>
				<p class="p_float_clear">
					<span class="goods_detail_txt" style="height:30px;line-height:30px;float: left;">数量：</span>
					<span class="num_left">-</span>
					<input type="text" class="num" id="num" th:value="${phProductData.saleQuantity}?${phProductData.saleQuantity}:1">
					<span class="num_right">+</span>
				</p>
				<th:block th:if="${phProductData.saleQuantity gt phProductData.productCount}">
					<input type="button"  value="商品暂停出售" class="buybutton">
				</th:block>
				<th:block th:if="${phProductData.saleQuantity le phProductData.productCount}">
					<input type="button" onclick="javascript:submitOn();" value="立即购买" class="buybutton">
				</th:block>
			</div>
		</div>
	</div>
<!-- 详情正文 灰色区域 -->
	<div class="detail_box_gray">
		<div class="centerbody ">
			<div class="box_gray_left">
				<span class="rxdp_tit">热销单品</span>
					<th:block th:each="phProductChildData,phProductChildDataStat:${phProductData.phProductVoList}" th:if="${not #lists.isEmpty(phProductData.phProductVoList)}">
						<th:block th:each="phProductChildImg,phProductChildImgStat:${phProductChildData.phProductImageVoList}" th:if="${not #lists.isEmpty(phProductChildData.phProductImageVoList)} and ${phProductChildImgStat.index eq 0}">
							<div class="rxdp_box">
								<a th:href="@{/shopping/index/getProductDateil(id=${phProductChildData.id})}">
									<img  th:src="@{${phProductChildImg.url}}" alt="" class="rxdp_pic">
									<span  class="rxdp_detail" th:text="${phProductChildData.productName}"></span><span class="rxdp_price" th:text="${phProductChildData.retailPrice}"></span>
								</a>
							</div>
						</th:block>
					</th:block>
			</div>
			<div class="box_gray_right">
				<span class="rxdp_tit" style="width: 813px;">商品介绍</span>
				<div class="spjs_box">
					<ul>
						<th:block th:each="propertyData,propertyDataStat:${phProductData.phProductPropertyVoList}" th:if="${not #lists.isEmpty(phProductData.phProductPropertyVoList)} ">
							<li ><a th:text="${propertyData.propertyName}"></a>：
								<th:block th:each="propertyValData,propertyValStat:${propertyData.phProductPropertyValVoList}" th:if="${not #lists.isEmpty(propertyData.phProductPropertyValVoList)}">
									<a th:text="${propertyValData.content}"></a>&nbsp;&nbsp;
								</th:block>
							</li>
						</th:block>
					</ul>
				</div>
				<div class="spjs_pic" style="margin-top:33px;">
						<div th:utext="${phProductData.description}"></div>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
<!-- 页面底部 -->
	<div class="foot-banner" style="margin-top: 0;">
		<div class="mod_help_list">
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">帮助中心</span>
					<ul class="mod_help_nav_con">
						<li><a href="" target="_blank" clstag="">购物中心</a></li>
						<li><a href="" target="_blank" clstag="">配送中心</a></li>
						<li><a href="" target="_blank" clstag="">支付中心</a></li>
						<li><a href="" target="_blank" clstag="">常见问题</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">售后服务</span>
					<ul class="mod_help_nav_con">
						<li><a href="" target="_blank" clstag="">退换货政策</a></li>
						<li><a href="" target="_blank" clstag="">退换货流程</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">关于我们</span>
					<ul class="mod_help_nav_con">
						<li><a href="" target="_blank" clstag="">公司介绍</a></li>
						<li><a href="" target="_blank" clstag="">普惠商城简介</a></li>
						<li><a href="" target="_blank" clstag="">联系客服</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">支付方式</span>
					<ul class="mod_help_nav_con">
						<li><a href="" target="_blank" clstag="">微信支付</a></li>
						<li><a href="" target="_blank" clstag="">支付宝支付</a></li>

					</ul>
			</div>
		</div>	
		<div class="copyright">
			<p>©2016北京普惠联盟商贸有限公司 puhui315.com 京ICP证070791号|京ICP备10211739号|电子公告服务规则</p>
			<p>电子商务经营许可证(京)字第03889号</p>
			<p>京公网安备11010502025545号</p>
			<p style="height: 34px;width:350px;margin:17px auto 25px">
			<a href="javascript:void(0);" class="outlink link-space"><img th:src="@{/images/foot-1.png}" alt=""></a>
			<a href="javascript:void(0);" class="outlink link-space"><img th:src="@{/images/foot-2.png}" alt=""></a>
			<a href="javascript:void(0);" class="outlink"><img th:src="@{/images/foot-3.png}" alt=""></a>
			</p>
		</div>

	</div>
	<!-- 弹窗部分 -->
		<div class="shadow"></div>
			<div class="login_box_2">
					<img th:src="@{/images/取消.png}" alt="" class="cancel">
					<span class="login_tit">请登录账号</span>
					<label for="" style="padding-left: 165px;">登录账号：</label><input type="text" id="login_user" class="inputbox user">
					<label for="" style="padding-left: 165px;">登录密码：</label><input type="password" id="login_pwd" class="inputbox password" >
					<div style="position: relative;">
						<label for="" style="padding-left: 165px;">验证码：</label>
						<input type="text" class="inputbox yzm" placeholder="输入验证码" id = "verify_codeval">
						<span class="get_yzm" >获取验证码</span>
						<img th:src="@{/member/loadverify}" class="get_yzm img img_pointer" alt="图片验证" id = "verify_codeid" onclick="yanzhengma();">
					</div>
					<span class = "ret_prompt"></span>
					<input type="button" class="inputbox btn" id = "login_submitid" onclick="loginFunc();" value="登录" style="font-size: 18px;">
					<div class="login_box_bottom"> 
						<span class="login_box_bottom_txt">还没有账号？<a th:href="@{/member/loadRegister}" class="login_box_bottom_link_1">现在去注册</a></span><a th:href="@{/member/loadRetrievePassword}" class="login_box_bottom_link_2">忘记密码？</a>
						<div style="clear: both;"></div>
					</div>
			</div>
	</th:block>	
	<form action="" id="productDateilFrom" method="post" style="display: none;">
		<input type="hidden" id="productDateilId" name="productId">
		<input type="hidden" id="dateilById" name="id">
		<input type="hidden" id="numDateil" name="num">
	</form>
</body>
<script th:inline="javascript">
	$(function(){
		$('.cancel').click(function(){
			$('.shadow').css('display','none');
			$('.login_box_2').css('display','none');
		});
		
		$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		$(window).resize(function(){
			$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		});
        $('.listleft').hover(function(){
            $('.ListType').siblings('.listbox').show();
        },function(){
            $('.ListType').siblings('.listbox').hide();
        });
        $('.num_left').click(function(){
        	var saleQuantity = $("#saleQuantity").val();
			var count=$('.num').val();
			if(parseInt(count) >1){
				if(parseInt(count)<= parseInt(saleQuantity)){
					layer.alert('不能小于起售数量', {icon: 2});
					return false;
				}else{
					count--;
				}
			}else{
				layer.alert('数量不能小于1', {icon: 2});
				return false;
			}
			$('.num').val(count);
			sumIntegralFunc();
		});
		$('.num_right').click(function(){
			var productCount = $("#productCount").val();//商品数量
			var count=$('.num').val();
			count++;
			if(parseInt(count)>parseInt(productCount)){
				layer.alert('库存不足!', {icon: 2});
				 sumIntegralFunc();
				return false;
			}
			$('.num').val(count);
			sumIntegralFunc();
		});
		$('#imageMenu li img').hover(function(){
			$("#midimg").attr('src',$(this).attr("src"));
        });
		
		$('#midimg').mouseover(function(){
			var imgValue = $(this).attr("src");
			if(!imgValue){
				imgValue="/images/01.jpg";
			}else{
				if(imgValue.indexOf("?w=")>0){
					imgValue = imgValue.substring(0,imgValue.indexOf("?w="));
					imgValue+="?w=440&h=450";
				}
			}
// 			$("#bigViewNew img").attr("src",imgValue);
// 			$("#bigViewNew").css('display','block'); 
// 			$("#winSelector").css('display','block'); 
        });
		/* $('#midimg').mouseout(function(){
			$("#bigViewNew").css('display','none'); 
			$("#winSelector").css('display','none'); 
        }); */
		//验证不能输入小数和负数
		$("#num").blur(function(){
			 var saleQuantity = $("#saleQuantity").val();
			 var nubmer = $(this).val();
			 if(isNaN(nubmer)||nubmer<=0||!(/^\d+$/.test(nubmer))){
		        layer.alert('请输入正确的数值,只允许输入整数!', {icon: 2});
		        $(this).val(saleQuantity);
		        sumIntegralFunc();
		        return false;
		     }else{
		    	 if(parseInt(nubmer)< parseInt(saleQuantity)){
						layer.alert('不能小于起售数量', {icon: 2});
						$(this).val(saleQuantity);
						sumIntegralFunc();
						return false;
				 }
		    	 /* var productCount = $("#productCount").val();//商品数量
		    	 if(parseInt(nubmer) > parseInt(productCount)){
		    		 layer.alert('库存不足', {icon: 1});
					 $(this).val(saleQuantity);
					return false;
				 } */
		     }
			 sumIntegralFunc();
		});
		  $("#midimg").attr('src',$("#imageMenu li:first img").attr("src"));
		  sumIntegralFunc();
	});
	//验证码
	var yanzhengma = function(){
    	var url = "/member/loadverify";
    	$("#verify_codeid").attr("src",url + "?" + Date.parse(new Date()));
	};
	//计算赠送积分
	var sumIntegralFunc = function(){
		var num = $("#num").val();//件数
		var retailPrice = $("#retailPrice").val();//零售价
		var freight = $("#freight").val();//物流费用
		var numberOfPackages = $("#numberOfPackages").val();//包邮数量
		if(parseInt(num)>=parseInt(numberOfPackages)){
			$("#retailPriceCount").html((retailPrice*num).toFixed(2));
		}else{
			var retailPrices = retailPrice*num+freight*num;
			$("#retailPriceCount").html(retailPrices.toFixed(2));
		}
	};
	//登录
	var loginFunc = function(){
		$.ajax({
			url:"/member/loginsubmit",
			type:"post",
			dataType:"json",
			data:{"accountNumber":$('#login_user').val(),"password":$('#login_pwd').val(),"verifyCode":$('#verify_codeval').val()},
			error:function(){
				layer.msg("系统繁忙，请稍后再试！");
				$('#login_submitid').attr("disable",false);
			},
			success:function(data){
				debugger;
				$('#login_submitid').attr("disable",false);
				if(data.code == "200"){
						$('#productDateilFrom').attr("action", "/shopping/index/getProductDateil");
						$('#productDateilFrom').submit();
//							window.location.href = "/shopping/index/getProductDateil";
				}else{
					$('.ret_prompt').html(data.message);
				}
			}
		});
	};
	//跳转
	var submitOn = function(){
		var productCount = $("#productCount").val();//商品数量
		var memberId = $("#memberId").val();
		$("#productDateilId").val($("#phProductId").val()) ;
		$("#dateilById").val($("#phProductId").val()) ;
		var num  = $("#num").val();
		$("#numDateil").val(num);
		var saleQuantity = $("#saleQuantity").val();
		if(parseInt(num)< parseInt(saleQuantity)){
			layer.alert('不能小于起售数量', {icon: 2});
			$("#num").val(saleQuantity);
			sumIntegralFunc();
			return false;
	 	}
		if(parseInt(productCount)>=parseInt(num)){
			if(memberId){
				$('#productDateilFrom').attr("action", "/shopping/order/generateCheckOrder");
				$('#productDateilFrom').submit(); 
			}else{
				$("span.get_yzm").css('display','none');
	    		$('.img').css('display','block');
				yanzhengma();
				$('.shadow').css('display','block');
	 			$('.login_box_2').css('display','block');
			}
		}else{
			layer.alert('库存不足，该商品暂时缺货', {icon: 2});
			 $('#num').val($("#saleQuantity").val());
			 sumIntegralFunc();
			return false;
		}
	};
	//退出
	var logoutUser = function(){
		layer.confirm('是否退出？', {
			 btn: ['是','否'] //按钮
			 }, function(){
				 window.location.href="/member/logout";
			});
	};
</script>
<!-- <script th:inline="javascript" th:src="@{/js/magnifier.js}"></script> -->
</html>